<template>
	<view v-if="isRender">
		<view class="data-box">
			<view class="data-item">
				<view>
					<text>当前<br>资产</text>
				</view>
				<view>
					<text>卡片<br>余额</text>
				</view>
				<view>
					<text>团队<br>总业绩</text>
				</view>
				<view>
					<text>最大<br>区业绩</text>
				</view>
				<view>
					<text>所有<br>小区业绩</text>
				</view>
			</view>
			<view class="data-item">
				<view>
					<text class="number-box">{{data.balance || 0}}</text>
				</view>
				<view>
					<text class="number-box">{{data.currentPrice || 0}}</text>
				</view>
				<view>
					<text class="number-box">{{data.teamPerformance || 0}}</text>
				</view>
				<view>
					<text class="number-box">{{data.maxPerformance || 0}}</text>
				</view>
				<view>
					<text class="number-box">{{data.minPerformance || 0}}</text>
				</view>
			</view>
		</view>
		<view class="subsection-box">
			<view :class="selectSubsection == item ? 'item active' : 'item'" @click="handleSelectSubsection(item)"
				v-for="(item,index) in list" :key="index">
				{{getStr('my.team.' + item)}}
			</view>
		</view>
		<view class="table-box">
			<view class="title-box">
				<text>{{getStr('my.team.uid')}}</text>
				<text>{{getStr('my.team.name')}}</text>
				<text>{{getStr('my.team.balance')}}</text>
				<text>{{getStr('my.team.cardBalance')}}</text>
				<text>{{getStr('my.team.time')}}</text>
			</view>
			<view class="item" v-for="item in userList">
				<text>{{item.telegramId || '-'}}</text>
				<text>{{item.nickName || '-'}}</text>
				<text>{{item.balance || 0}}</text>
				<text>{{item.currentPrice || 0}}</text>
				<text>{{moment(item.createTime).format('YYYY-MM-DD HH:mm:ss') || '-'}}</text>
			</view>
		</view>
	</view>
</template>

<script setup>
	import sysButton from '@/components/sysButton/index.vue'
	import moment from 'moment'
	import {
		ref,
		reactive
	} from 'vue'
	import {
		onShow,
		onLoad
	} from '@dcloudio/uni-app'
	import {
		myTeam
	} from '@/common/api/common.js'
	const isRender = ref(true)
	const list = ref(['directPush', 'simplePush', 'manange'])
	const selectSubsection = ref('directPush')
	const data = ref({
		balance: '',
		currentPrice: '',
		maxPerformance: '',
		minPerformance: '',
		teamPerformance: '',
	})
	const userList = ref([])

	const handleSelectSubsection = (item, index) => {
		console.log(item)
		selectSubsection.value = item
		myTeamFn()
	}

	const goPage = (url) => {
		uni.navigateTo({
			url: url
		})
	}

	const myTeamFn = async () => {
		let type = 'zt'
		if (selectSubsection.value == 'directPush') {
			type = 'zt'
		}
		if (selectSubsection.value == 'simplePush') {
			type = 'jt'
		}
		if (selectSubsection.value == 'manange') {
			type = 'gl'
		}
		const res = await myTeam({
			telegramId: uni.getStorageSync('telegramId'),
			type: type
		})
		if (res.code == 200) {
			data.value = {
				...res.data
			}
			userList.value = res.data.userList
		}
	}

	const getStr = (key) => {
		return uni.$t(key)
	}
	const setIsRender = () => {
		isRender.value = false
		setTimeout(() => {
			isRender.value = true
		}, 50)
	}

	onLoad(() => {
		myTeamFn()
	})
	onShow(() => {
		uni.$tg.showButton()
		setIsRender()
	})
</script>
<style>
	page {
		background: #1C1E23;
	}
</style>
<style lang="scss" scoped>
	.data-box {
		width: calc(100vw - 28rpx - 28rpx);

		background: #272A2F;
		border-radius: 12rpx;
		padding: 26rpx 0;
		box-sizing: border-box;
		margin: 28rpx auto 0;

		.data-item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding-top: 20rpx;
			text-align: center;

			view {
				width: 20%;
				font-size: 24rpx;
				color: #ffffff80;

				.number-box {
					color: #ffffff;
				}
			}
		}

		.data-item:first-child {
			border-bottom: 1px dashed #ffffff20;
			padding-bottom: 20rpx;
		}




	}

	.subsection-box {
		width: calc(100vw - 28rpx - 28rpx);
		height: 84rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background: #272A2F;
		border-radius: 12rpx;
		padding: 8rpx;
		box-sizing: border-box;
		margin: 56rpx auto 0;

		.item {
			width: 33.33%;
			height: calc(84rpx - 8rpx - 8rpx);
			color: #ffffff;
			border-radius: 12rpx;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.active {
			background: #1C1F24;
		}
	}

	.table-box {
		width: calc(100% - 28rpx - 28rpx);
		margin: 56rpx auto 0;
		background-color: #262930;
		border-radius: 16rpx;

		.title-box {
			height: 80rpx;
			border-bottom: 1rpx dashed #FFFFFF80;
			box-sizing: border-box;
			font-weight: 800;
			font-size: 32rpx;
			color: #FFFFFF80;
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 24rpx;
			padding: 0 30rpx;

			text {
				width: 33.33%;
				text-align: center;
			}

			text:nth-child(1) {
				text-align: left;
			}

			text:nth-child(5) {
				text-align: right;
			}
		}

		.item {
			padding: 30rpx 30rpx;
			display: flex;
			justify-content: space-between;
			color: #FFFFFF;
			font-size: 20rpx;

			text {
				width: 33.33%;
				text-align: center;
			}

			text:nth-child(1) {
				text-align: left;
			}

			text:nth-child(5) {
				text-align: right;
			}
		}
	}
</style>